<template>
  <view class="login-page">
    <!-- 顶部背景图 -->
    <view class="login-header">
      <image class="bg-image" src="/static/index/login_bg.png" mode="aspectFill" />

    </view>
    <view class="welcome-text">
      <text>Hello! 欢迎登录</text>
    </view>

    <!-- 登录表单 -->
    <view class="login-form">
      <!-- 手机号输入 -->
      <view class="input-item">
        <input type="text" v-model="formData.username" placeholder="请输入账号" maxlength="11" @input="handlePhoneInput" />
      </view>

      <!-- 密码输入 -->
      <view class="input-item">
        <input :type="showPassword ? 'text' : 'password'" v-model="formData.password" placeholder="请输入密码"
          @input="handlePasswordInput" />
        <image :src="showPassword ? '/static/index/eye-open.png' : '/static/index/eye-close.png'" mode="aspectFit"
          class="eye-icon" @click="togglePasswordVisibility" />
      </view>

      <!-- 忘记密码 -->
      <view class="forget-password">
        <text @click="toForgetPassword">忘记密码?</text>
      </view>

      <!-- 登录按钮 -->
      <button class="login-btn" :class="{ active: isFormValid }" :disabled="!isFormValid" @click="handleLogin">
        登录 →
      </button>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { loginApi } from '@/api/login.js'

  // 表单数据
  const formData = ref({})

  // 密码显示状态
  const showPassword = ref(false)

  // 表单验证
  const isFormValid = computed(() => {
    // return formData.value.username.length === 11 && formData.value.password.length >= 6
    return true
  })

  // 处理手机号输入
  const handlePhoneInput = (e) => {
    // formData.value.username = e.detail.value.replace(/\D/g, '')
  }

  // 处理密码输入
  const handlePasswordInput = (e) => {
    formData.value.password = e.detail.value
  }

  // 切换密码显示
  const togglePasswordVisibility = () => {
    showPassword.value = !showPassword.value
  }

  // 跳转忘记密码
  const toForgetPassword = () => {
    uni.navigateTo({
      url: '/pages/my/forget-password'
    })
  }

  // 处理登录
  const handleLogin = async () => {
    formData.value.type = 2
    try {
      const res = await loginApi(formData.value)
      console.log(res, 'res')
      if (res.code == 200) {
        uni.showToast({
          title: res.msg,
          icon: 'success'
        })
        // 存储token
        uni.setStorageSync('token', res.token)
        // return
        // 延迟跳转
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/my/index'
          })
        }, 2000)
      }
    } catch (error) {
      uni.showToast({
        title: error.message || '登录失败',
        icon: 'none'
      })
    }
  }
</script>

<style lang="scss" scoped>
  .login-page {
    min-height: 100vh;
    background: #FFFFFF;

    .login-header {
      position: relative;
      height: 480rpx;

      .bg-image {
        width: 100%;
        height: 100%;
      }
    }

    .welcome-text {
      margin: 40rpx auto;
      text-align: center;

      text {
        color: #3D3D3D;
        font-size: 46rpx;
        font-weight: 500;
      }
    }

    .login-form {
      padding: 20rpx 0 60rpx 40rpx;
      width: 88%;

      .input-item {
        position: relative;
        margin-bottom: 40rpx;

        input {
          width: 100%;
          height: 90rpx;
          /* background: #F5F5F5; */
          padding: 0 10rpx;
          font-size: 28rpx;
          color: #9CA3AF;
          border-bottom: 1rpx solid #E3E3EA;

          &::placeholder {
            color: #999999;
          }
        }

        .eye-icon {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 40rpx;
          height: 40rpx;
        }
      }

      .forget-password {
        text-align: right;
        margin-bottom: 60rpx;

        text {
          color: #9CA3AF;
          font-size: 28rpx;
        }
      }

      .login-btn {
        width: 100%;
        height: 90rpx;
        background: #CCCCCC;
        border-radius: 45rpx;
        color: #FFFFFF;
        font-size: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;

        &.active {
          background: #3B82F6;
        }
      }
    }
  }
</style>